<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>门店标签</span>
      </div>
    </div>
    <el-button type="primary" size="medium" @click="handleEdit">新增标签</el-button>
    <div class="tabledata mar_t20">
      <el-table
              v-loading="listLoading"
              :element-loading-text="elementLoadingText"
              :data="list"
              stripe
              style="width: 100%"
              @selection-change="setSelectRows">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="sort"
                label="排序"
        >
        </el-table-column>
        <el-table-column
                prop="name"
                label="标签名称"
        >
        </el-table-column>
        <el-table-column
                prop="display"
                label="显示状态"
        >
          <template slot-scope="scope">
            <div class="">
              <el-switch v-model="scope.row.display" active-value="1" inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                label="操作"
        >
          <template slot-scope="scope">
            <div class="flex">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text"  @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
              background
              layout="prev, pager, next"
              :total="page.total"
              :page-size="page.pagesize"
              :current-page.sync='page.currentPage'
              @current-change="handleCurrentChange">
      </el-pagination>
      <edit ref="edit" @fetchData="fetchData"></edit>
    </div>
  </div>
</template>
<script>
  import Edit from "../shop/components/shoplabeledit";
  import {storeCategoryList, modifyStoreCategory } from "@/api/shop";
  export default {
    components: { Edit },
    created() {
      this.fetchData();
    },
    data () {
      return {
        list: [],
        listLoading: true,
        selectRows: "",
        elementLoadingText: "正在加载...",
        page: {
          total: 0,
          size: 10,
          currentPage: 1,
        },
      }
    },
    methods: {
      async fetchData() {
        this.listLoading = true;
        var params = {
          page: this.page.currentPage,
          item: 3,
        }
        const { data, count } = await storeCategoryList(params);
        this.list = data;
        this.page.total = count;
        setTimeout(() => {
          this.listLoading = false;
        }, 100);
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs["edit"].showEdit(row);
        } else {
          this.$refs["edit"].showEdit();
        }
      },
      setSelectRows(val) {
        this.selectRows = val;
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.fetchData();
      },
      async changeSwitch(row) {
        const {msg} = await modifyStoreCategory({id: row.id,type:1,display: row.display});
        this.$baseMessage(msg, "success");
        this.fetchData();
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm("你确定要删除当前项吗", null, async () => {
            const {msg} = await modifyStoreCategory({id: row.id,type:2});
            this.$baseMessage(msg, "success");
            this.fetchData();
          });
        } else {
          if (this.selectRows.length > 0) {
            const id = this.selectRows.map((item) => item.id);
            this.$baseConfirm("你确定要删除选中项吗", null, async () => {
              const {msg} = await modifyStoreCategory({id,type:2});
              this.$baseMessage(msg, "success");
              this.fetchData();
            });
          } else {
            this.$baseMessage("未选中任何行", "error");
            return false;
          }
        }
      },
    }
  }
</script>
<style>
  .ivu-layout-content{
    text-align: left;
  }
</style>
